<template>
  <div class="project-permission">
    <el-card>
      <!-- 标题头 -->
      <div slot="header">
        <span
          style="
            display: flex;
            align-items: center;
            font-size: 18px;
            padding-bottom: 10px;
          "
        >
          <img
            src="@/assets/img/edit.svg"
            v-if="headName == '修改'"
            style="height: 15px; width: 15px; margin-right: 5px"
          />
          <img
            src="@/assets/img/xmxz.png"
            style="height: 20px; width: 20px; margin-right: 5px"
            v-if="headName == '新增项目'"
          />
          {{ headName }}
        </span>
      </div>
      <!-- <div class="xhxBox"></div> -->
      <h3 style="margin: 10px 0px; display: flex; justify-content: center">
        汇总项目基本信息
      </h3>

      <div class="form" style="margin-top: 2%">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-row style="border-bottom: 1px #eee solid; margin-bottom: 20px">
            <el-col :span="12">
              <el-form-item label="项目名称" prop="capItemProjectName">
                <el-input
                  v-model.trim="form.capItemProjectName"
                  placeholder="如:淘宝0元购"
                  clearable
                  maxlength="20"
                  class="inputWidth"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="---------" prop="capItemProjectExplain">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="项目简介"
                  maxlength="30"
                  autosize
                  clearable
                  v-model.trim="form.capItemProjectExplain"
                >
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="选择项目类型" prop="field102">
                <el-select
                  v-model="form.field102"
                  placeholder="请选择项目类型"
                  clearable
                  filterable
                  :disabled="headName == '修改'"
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in field108Options"
                    :key="index"
                    :label="item.projectTypeName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排序" prop="capItemProjectSort">
                <el-input
                  v-model.trim="form.capItemProjectSort"
                  maxlength="2"
                  clearable
                  onkeyup="this.value=this.value.replace(/\D/g,'')"
                  placeholder="请输入项目序号"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row style="margin-bottom: 20px">
            <el-col :span="12" v-if="form.field102 == 1 || form.field102 == 2">
              <el-form-item label="项目模式" prop="field103">
                <el-radio-group v-model="form.field103" size="medium">
                  <el-radio
                    v-for="(item, index) in field1021ptions"
                    :key="index"
                    :label="item.value"
                    >{{ item.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="12" v-if="form.field102 == 3">
              <el-form-item label="码属性" prop="field104">
                <el-radio-group v-model="form.field104" size="medium">
                  <el-radio
                    v-for="(item, index) in field1022ptions"
                    :key="index"
                    :label="item.value"
                    >{{ item.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row
            style="border-bottom: 1px #eee solid; margin-bottom: 20px"
            v-if="form.field102 == 3"
          >
            <el-col :span="12">
              <el-form-item label="数据属性" prop="field105">
                <el-radio-group v-model="form.field105" size="medium">
                  <el-radio
                    v-for="(item, index) in field1023ptions"
                    :key="index"
                    :label="item.value"
                    >{{ item.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row style="border-bottom: 1px #eee solid; margin-bottom: 20px">
            <el-col :span="12">
              <el-form-item label="上传项目图标">
                <template>
                  <el-upload
                    class="upload-demo"
                    :action="actionUrl()"
                    :on-change="handleChange"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :auto-upload="false"
                    accept=".jpg,.png,.jpeg,JPG,JPEG"
                    list-type="picture"
                    style="width: 90%"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">
                      只能上传jpg/png文件，且不超过500kb
                    </div>
                  </el-upload>
                </template>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row style="border-bottom: 1px #eee solid; margin-bottom: 20px">
            <el-col :span="24">
              <el-form-item label="">
                <quill-editor
                  ref="text"
                  v-model="contentText"
                  class="myQuillEditor"
                  style="height: 370px; padding-bottom: 65px;"
                  :options="editorOption"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item align="center">
            <el-button type="primary" style="width: 100px" @click="lastStep"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  statelistAPI,
  geteditindex,
  editindex,
  addlistAPI,
} from "@/api/projectManagement/index.js";
import { upload } from "@/api/system/index.js";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  data() {
    return {
      //富文本框
      contentText: "",
      editorOption: {
        modules: {
          syntax: {
            highlight: (text) => hljs.highlightAuto(text).value,
          },
          toolbar: [
            ["bold", "italic", "underline", "strike"], // toggled buttons
            ["blockquote", "code-block"],

            [{ header: 1 }, { header: 2 }], // custom button values
            [{ list: "ordered" }, { list: "bullet" }],
            [{ script: "sub" }, { script: "super" }], // superscript/subscript
            [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
            [{ direction: "rtl" }], // text direction

            [{ size: ["small", false, "large", "huge"] }], // custom dropdown
            [{ header: [1, 2, 3, 4, 5, 6, false] }],

            [{ color: [] }, { background: [] }], // dropdown with defaults from theme
            [{ font: [] }],
            [{ align: [] }],
            ["image"], //去除video即可
          ],
        },
        placeholder: "编辑内容...",
      },
      //标题
      headName: "",
      field108Options: [],

      field1021ptions: [
        {
          label: "划拨模式",
          value: 0,
        },
        {
          label: "码池分权模式",
          value: 1,
        },
      ],
      field1022ptions: [
        {
          label: "按天",
          value: 0,
        },
        {
          label: "永久",
          value: 1,
        },
      ],
      field1023ptions: [
        {
          label: "单次匹配",
          value: 0,
        },
        {
          label: "多次匹配",
          value: 1,
        },
      ],
      // 图片
      formDatas: undefined,
      userId: undefined,
      // 图片
      fileList: [
        // {
        //   name: "food2.jpeg",
        //   url:
        //     "blob:http://localhost/72716409-2682-4e3e-90f0-cf03b6216493",
        // },
      ],
      form: {
        // 项目名称
        capItemProjectName: "",
        // 项目简介文本域
        capItemProjectExplain: "",
        // 项目编号
        // 排序  项目序号
        capItemProjectSort: "1",
        // 数据种类单选框
        // 1，汇总数据     0，脱敏数据
        capItemProjectData: "1",
        field103: null,
        field102: 1,
        field104: null,
        field105: null,

        // 项目logo图片上传地址
        // fileListUrl:"http://121.40.114.220/wp-content/uploads/2016/09/yiduoyun.jpg",
        fileListUrl: "",
      },
      // 校验规则
      rules: {
        field102: [
          {
            required: true,
            message: "选择项目类型不能为空",
            trigger: "change",
          },
        ],
        field104: [
          {
            required: true,
            message: "不能为空",
            trigger: "change",
          },
        ],
        field105: [
          {
            required: true,
            message: "不能为空",
            trigger: "change",
          },
        ],
        capItemProjectSort: [
          {
            required: true,
            message: "排序不能为空",
            trigger: "change",
          },
          {
            pattern: /^[0-9]*$/,
            message: "格式错误",
            trigger: "change",
          },
        ],
        field103: [
          {
            required: true,
            message: "选择项目模式不能为空",
            trigger: "change",
          },
        ],
        capItemProjectName: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
          { min: 0, max: 10, message: "长度在 0到 10个字符", trigger: "blur" },
        ],
        capItemProjectExplain: [
          { required: true, message: "请输入项目简介", trigger: "blur" },
          { min: 10, message: "长度最少10个字符", trigger: "blur" },
        ],
        input5: [
          { required: true, message: "请输入项目编号", trigger: "blur" },
        ],
        inputNum: [
          { required: false, message: "请输入项目序号", trigger: "blur" },
        ],
      },
      type: 1,
      postArr: [],
    };
  },
  created() {
    this.userId = sessionStorage.getItem("userID") - 0;
    console.log(this.userId);
    if (this.$route.query.proId) {
      this.getData();
      this.headName = "修改";
    } else {
      this.addData();
      this.headName = "新增项目";
    }
  },
  components: {
    quillEditor,
  },
  mounted() {},
  methods: {
  
    async addData() {
      //获取项目类型下拉框数据
      let datas = {};
      const data = await statelistAPI(datas);
      // console.log(data, "获取下拉框");
      if (data.code == 200) {
        this.field108Options = data.data;
      } else {
        this.$message.error(data.msg);
      }
      // console.log(data, "数据");
    },
    async getData() {
      //获取项目类型下拉框数据

      const data = await statelistAPI({});
      console.log(data, "12312");
      if (data.code == 200) {
        this.field108Options = data.data;
      }
      console.log(this.$route.query.proId);
      const getdata = await geteditindex(this.$route.query.proId);
      console.log(getdata, "获取数据");
      if (getdata.code == 200) {
         this.fileList=[];
        this.form.capItemProjectExplain = getdata.data.one; //"项目简介   控制30个字符以内"
        this.form.capItemProjectName = getdata.data.proName; //项目名称
        this.form.capItemProjectSort = getdata.data.proSort; //排序
        this.form.field102 = getdata.data.typeId; //项目类型
        this.form.field103 = getdata.data.codeType; //项目模式 0划拨 1分权模式
        this.form.field104 = getdata.data.two - 0; //码属性
        this.form.field105 = getdata.data.three - 0; //数据属性
        this.fileList.push({ url: getdata.data.proLogo, name: "img" });
        // this.form.fileListUrl="http://mao.91weiduan.cn"+getdata.data.proLogo;
        this.form.fileListUrl =  getdata.data.proLogo;//项目图标
        this.contentText = getdata.data.five;
        // console.log(getdata, "获取数据2");
      }
    },
    //提交
    lastStep() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          if (this.form.fileListUrl == "") {
            this.$message({
              message: "请上传图标",
              type: "warning",
            });
          } else {
            console.log(this.form, "提交参数");
            // four

            let paran = {};
            if (this.$route.query.proId) {
              paran = {
                one: this.form.capItemProjectExplain, //"项目简介   控制30个字符以内"
                proLogo: this.form.fileListUrl, //项目图标
                proName: this.form.capItemProjectName, //项目名称
                proSort: this.form.capItemProjectSort, //排序
                typeId: this.form.field102, //项目类型
                codeType: this.form.field103 || 0, //项目模式 0划拨 1分权模式
                two: this.form.field104, //码属性
                three: this.form.field105, //数据属性
                userId: this.userId,
                proId: this.$route.query.proId,
                five:this.contentText,  //富文本框
              };
                 console.log(paran, "提交后给后端的参数");
              const data = await editindex(paran);
              console.log(data, "提交后回调参数");
              if (data.code == 200) {
                this.$message({
                  message: "提交成功",
                  type: "success",
                });
                this.$router.push("projectlist");
              } else {
                this.$message.error("操作失败");
              }
            } else {
              paran = {
                one: this.form.capItemProjectExplain, //"项目简介   控制30个字符以内"
                proLogo: this.form.fileListUrl, //项目图标
                proName: this.form.capItemProjectName, //项目名称
                proSort: this.form.capItemProjectSort, //排序
                typeId: this.form.field102, //项目类型
                codeType: this.form.field103 || 0, //项目模式 0划拨 1分权模式
                two: this.form.field104, //码属性
                three: this.form.field105, //数据属性
                userId: this.userId,
                 five:this.contentText,  //富文本框
              };
              console.log(paran, "新增");
              const data = await addlistAPI(paran);
              if (data.code == 200) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.$router.push("projectlist");
              } else {
                this.$message.error("操作失败");
              }
            }
          }
        }
        // TODO 提交表单
      });
      // this.$router.push("/asd/add/itemS").catch(() => {});
    },
    actionUrl() {
      return "";
    },
    handleChange(file, fileList) {
      this.fileList = [];
      this.fileList.push(file);
      let formData = new FormData();
      // formData.append("avatarfile", file.raw);
      formData.append("file", file.raw);
      //调用后端接口
      upload(formData).then((data) => {
        console.log(data, "222");
        if (data.code == 200) {
          // this.form.fileListUrl="http://mao.91weiduan.cn"+data.url;
          this.form.fileListUrl = this.$situation.dizhi + data.fileName;
          
        }
      });
    },
    // 取消图片的函数
    handleRemove(file, fileList) {
      this.fileList = [];
    },
    submitForm() {
      this.$router.push("/asd/build/index").catch(() => {});
    },
  },
};
</script>

<style scoped lang="scss">
.xhxBox {
  height: 5px;
  margin-top: 0px;
  border-top: 1px #eee solid;
}
.inputWidth {
  // border: 1px red solid;
  width: 100%;
}
</style>
<style>
.project-permission {
  margin: 15px;
}

.project-permission .el-card__body {
  min-height: 800px;
}

.project-permission .el-card__header {
  margin: 0 20px;
  padding-left: 0px;
}

.project-permission .form {
  width: 800px;
  margin: auto;
}

.project-permission .form .el-form .row {
  display: flex;
}

.project-permission .form .el-form .row .el-form-item:first-child {
  margin-right: 100px;
}

.project-permission .form .el-form .row .el-radio-group {
  margin-left: 20px;
}

.project-permission .form .el-form {
  margin: auto;
}

.project-permission .form .el-form .button {
  margin: auto;
  text-align: center;
}

.project-permission .el-divider--horizontal {
  background: #f0f0f0;
}

.project-permission .form .group {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.project-permission .form .group .group-item {
  display: flex;
  align-items: center;
  background: #e8f4ff;
  margin-right: 15px;
  /* height: 20px; */
  height: 30px;
  color: #4f86f7;
  font-size: 10px;
  margin-bottom: 15px;
  padding: 10px 5px;
  border-radius: 3px;
  border: 1px solid #e8f4ff;
}

.project-permission .el-dialog__headerbtn .el-dialog__close {
  color: #a39b9f;
  font-size: 25px;
}

.project-permission .el-dialog {
  border-radius: 5px;
}

.project-permission .el-dialog .el-dialog__header {
  border-bottom: 1px solid #eeeeee;
  width: 90%;
  margin: auto;
  padding-left: 0;
}

.project-permission .el-dialog__body {
  padding-left: 26px;
}

.project-permission .el-checkbox__input .el-checkbox__inner {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 20px;
}

.project-permission .unselected.el-checkbox__input .el-checkbox__inner::before {
  border: 1px solid #fff;
  box-sizing: content-box;
  content: "";
  border-left: 0;
  border-top: 0;
  height: 1px;
  left: -2px;
  position: absolute;
  top: 7px;
  width: 20px;
}

.project-permission .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: white;
}

.project-permission .el-checkbox__input .el-checkbox__inner::after {
  border: 1px solid #fff;
  box-sizing: content-box;
  content: "";
  border-left: 0;
  border-top: 0;
  height: 10px;
  left: 7px;
  position: absolute;
  top: 2px;
  width: 4px;
  transform: rotate(45deg) scaleY(1);
}
</style>
